React是什麼

• 用來建構使用者介面的函式庫
• 可以簡單的建造 SPA (Single Page Application)單頁式應用程式
  → 整個網站只有一個 HTML 頁面（index.html），之後的內容切換、資料更新，都是透過 JavaScript 動態改變頁面內容
  
  圖一：SPA （Single Page Application）單頁式應用程式的運作

React的運作

• 把整個畫面拆成一個個元件（Component）來建構，再把它們組合起來變成完整的頁面，更有效率且維護地建造互動式網頁介面
• 如果直接用 HTML, CSS, JavaScript 編寫網頁，開發過程會很複雜且難以維護
  
  圖二：React的元件架構（範例）

圖三：ANSII 樹狀圖（範例）

index.js

在React專案中，index.js是應用程式的入口，負責將元件渲染到瀏覽器DOM的畫面上。

index.js

建立 React 渲染入口

const root = ReactDOM.createRoot(document.getElementById('root'));

document.getElementById('root')：在 HTML 檔案中找到<div id="root"></div> 這個容器，ID稱為root

ReactDOM.createRoot() ：

• 建立一個 React 的根節點（Root），用來管理應用程式內部元件樹（component tree）的入口
• Root 是 React 18 以後的新方法（Concurrent Mode）
  • 渲染過程可以被中斷再恢復（提高流暢度）

渲染 React 元件到畫面

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

root.render(...)：

• 呼叫根物件的 render 方法，將指定的元件渲染到網頁上
• 把<App /> 元件轉換成真實的 DOM 元素，並放到<div id="root"> 中

<React.StrictMode>：

• 開發模式下的檢查工具
• 在應用程式及其子元件中執行額外的檢查和警告：
  • 是否使用了已棄用的 API
  • 是否有不安全的生命週期方法
  • 是否有不符合最佳實踐的地方

<App />

• 主要應用程式的元件
• 包含了整個應用程式的架構和所有子元件，從<App />開始建立元件樹，再渲染所有子元件